<template>
<view class="add-members-box">
		<view class="head">
			<navigator @click="gotoarrow" class="return-arrow">
				<image class="return-img" src="../../../static/arrow.png"></image>
			</navigator>
			<view class="service-list">注册会员
			<button class="save-button" @click="addUser()">保存</button>
			</view>			
		</view>
		<!--<view class="portrait">
			<view class="portrait-title">头像
			 <image class="portrait-img" src="../../../static/11.jpg"></image>
			</view>	
		</view>-->
		
		<view class="style-input">
		    <view class="page">
		        <view class="input-title">真实姓名<span class="required">*</span></view>	
		        <input class="input-box" maxlength="10" v-model="muNickName"  placeholder="请输入真实姓名" />
		    </view>
		</view>
		<view class="style-input">
		    <view class="page">
		        <view class="input-title">手机号<span class="required">*</span></view>
		        <input class="input-box" maxlength="11" v-model="muMobile" placeholder="请输入手机号" />
		    </view>
		</view>
		<view class="style-input">
		    <view class="page">
		        <view class="input-title">性别</view>
		         <radio-group class="uni-list radio-list" @change="radioChange">
		            <label class="uni-list-cell uni-list-cell-pd label-list" v-for="(item,index) in radioItems" :key="item.id">
		                    <radio :value="item.id" :checked=" muSex==item.id"></radio>
		                    <label class="label-2-text" :for="item.id">
		                        <text>{{item.value}}</text>
		                    </label>
		            </label>
		        </radio-group>
		    </view>
		</view>
			<view class="van-cell">
					<label class="van-cell_title">会员身份:</label>
					<div class="van-cell_value">
						<div class="van-field_body">
							<select class="van-cell_value van-cell_select" v-model="levelId">
								<option value="0">请选择会员身份</option>
								<option v-for="level in levellist" :value="level.alId">{{level.alName}}</option>
							</select>
						</div>
					</div>
		</view>
			<view class="van-cell">
					<label class="van-cell_title">推荐人:</label>
					<div class="van-cell_value">
						<div class="van-field_body">
							   <multiselect v-model="muUserId" placeholder="选择推荐人" label="name" track-by="code" :options="muUser_tags" :multiple="false" :taggable="true" :searchable="false" :showLabels="false" :max-height="120">
							<span slot="noOptions">暂无会员标签</span>
							 </multiselect>
							<!-- <select class="van-cell_value van-cell_select" v-model="muUserId" >
								<option v-for="item in muUserlist" :value="item.muCode">{{item.muNickName}}--{{item.muCode}}</option>
							</select> -->
						</div>
					</div>
		</view>
		<view class="van-cell">
					<label class="van-cell_title">会员标签:</label>
					<div class="van-cell_value">
						<div class="van-field_body">
							   <multiselect v-model="member_tags" placeholder="选择用户标签" label="name" track-by="code" :options="tags" :multiple="true" :taggable="true" :searchable="false" :showLabels="false" :max-height="120">
							  <span slot="noOptions">暂无会员标签</span>
							   </multiselect>
							</div>
					</div>
		</view>
		<view class="style-input">
					<view class="page">
					    <view class="input-title">会员备注</view>
					    <input class="input-box" maxlength="100" v-model="muMemo" placeholder="请输入备注" style="width: 75%;
    float: right;"/>
					</view>
		        </view>
		<!--<view class="style-input">
		    <view class="page">
		        <view class="input-title">生日</view>
		        <view class="uni-list-cell-db">
		        	<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
		        	<text class="birthday-date">{{date}}</text> 
		        	</picker>
		        </view>
		    </view>
		</view>-->
		
</view>

</template>

<script>
	import Multiselect from 'vue-multiselect'
	export default {
	components: {Multiselect},
	data() {
		const currentDate = this.getDate({
		    format: true
		})
	    return {
			title: 'picker',
	        index: 0,
			muMobile:"",
			muNickName:"",
			muMemo:"",
			muSex:'0',
			alId:5,
			mlId:0,
	        date: currentDate,
	       
	        radioItems: [{
	                id: '1',
	                value: '男'
	            },
	            {
	                id: '0',
	                value: '女',	
					
	            }
	        ],
	        hidden: false,
			levellist:[],
			muUserlist:[],
			member_tags: [],
			muUserId:[],
			muUser_tags:[],
			tags: [],
			levelId:0	
	    }
	},
	computed: {
	    startDate() {
	        return this.getDate('start');
	    },
	    endDate() {
	        return this.getDate('end');
	    }
	},
	 onLoad:function(event) {
		// 初始化列表信息
		this.params =event;
		if(this.params.admin_code!=undefined && this.params.admin_code!=""){
			uni.setStorageSync('shop_id', this.params.shop_id);
			uni.setStorageSync('admin_name', this.params.admin_name);
			uni.setStorageSync('admin_code', this.params.admin_code);
			uni.setStorageSync('openid', this.params.openid);
			uni.setStorageSync('muHeadUrl', this.params.muHeadUrl);
		}else{
			uni.setStorageSync('openid', '');
			uni.setStorageSync('muHeadUrl', '');
		}
		if(uni.getStorageSync('admin_code')=="" || uni.getStorageSync('admin_code')==undefined){
			uni.showToast({
				title:"您未被受权添加用户",
				icon:'none'
			});
		}
		//this.getUserLevel();
		this.getAgencyLevelList(uni.getStorageSync('shop_id'));
		this.getTags(uni.getStorageSync('shop_id'));
		this.getMuUsers();
	},
	methods:{
		bindPickerChange: function(e) {
		    console.log('picker发送选择改变，携带值为', e.target.value)
		    this.index = e.target.value
		},
		bindDateChange: function(e) {
		    this.date = e.target.value
		},
		bindTimeChange: function(e) {
		    this.time = e.target.value
		},
		clearAll(){
			this.muMobile="";
			this.muNickName="";
			this.muMemo="";
		},
		getMuUsers(){
			uni.request({
				url: uni.getStorageSync('api_url')+'/member/getList?mcKey='+uni.getStorageSync('shop_id'),
				complete: (result) => {
					uni.hideLoading();
					if(result.data.code != 1){
						uni.showToast({
							title:result.data.msg
						});
					}else{
							result = result.data.data.data;
						var arr = []
						for (let i in result) {
						    let o = [];
							o = {'code':result[i].muCode,'name':result[i].muNickName};
							//console.log(o )
							arr.push(o);
						}
						this.muUser_tags = arr;
					}
				},
				});
		},
		getUserLevel(){
			
			uni.request({
				url: uni.getStorageSync('api_url')+'/distributionLevel/getList?dcKey='+uni.getStorageSync('shop_id'),
				complete: (result) => {
					
					if(result.data.code != 1){
						uni.showToast({
							title:result.msg,
							icon:'none'
						});
					}else{
						const rdata=result.data.data.data;
						data.forEach((news) => {
							if(news.alLevel==1){
								this.alId=news.alId;
								this.mlId=news.alLevel;
							}
						});
					}
					
				},
				});
		},
		getAgencyLevelList(muid){
			uni.request({
				url: uni.getStorageSync('api_url')+'/agencyLevel/getList/?acKey='+muid,
				complete: (result) => {
					uni.hideLoading();
					if(result.data.code != 1){
						uni.showToast({
							title:result.data.msg
						});
					}else{
							this.levellist = result.data.data.data;
					}
					
				},
			});
		},
		getTags(mcId){
			uni.request({
				url: uni.getStorageSync('api_url2')+'/main/getUserTags/?sId='+mcId,
				complete: (result) => {
					uni.hideLoading();
					if(result.data.code != 1){
						uni.showToast({
							title:result.data.msg
						});
					}else{
							result = result.data.data;
							var arr = []
							for (let i in result) {
							    let o = [];
								o = {'code':i,'name':result[i]};
								arr.push(o);
							}
							this.tags = arr;
							console.log(this.tags)
					}
					
				},
			});
		},
		addUser(){
			if(this.muNickName==''){
				uni.showToast({
					title:"请输入真实姓名",
					icon:'none'
				});
				return false;
			}
			if(this.muMobile.length!=11){
				uni.showToast({
					title:"请输入11位手机号",
					icon:'none'
				});
				return false;
			}
			// if(this.muNickName==''){
			// 	uni.showToast({
			// 		title:"请输入昵称",
			// 		icon:'none'
			// 	});
			// 	return false;
			// }
			
			var arr = [];
			var mutags=[];
			for (let i in this.member_tags) {
			    let o = [];
				o = this.member_tags[i].code;
				arr.push(o);
			}
			mutags = JSON.stringify(arr);
			var muUser;
			if(this.muUserId.code==undefined){
				muUser="";
			}
			else{
				muUser = this.muUserId.code;
			}
			
			uni.request({
				url: uni.getStorageSync('api_url')+'/member/add',
				method: 'POST',
				data: {mcKey: uni.getStorageSync("shop_id"),
				openid: uni.getStorageSync("openid"),
				muHeadUrl: uni.getStorageSync("muHeadUrl"),
				muNickName: this.muNickName,
				muMemo: this.muMemo,
				muSex: this.muSex,
				alId: this.alId,
				muId: this.mlId,
				muMobile: this.muMobile,
				alId:this.levelId,
				muTags:mutags,
				muReferrerId:muUser,
				createUser:uni.getStorageSync("admin_name")},
				header:{'content-type': 'application/x-www-form-urlencoded'},
				complete: (result) => {
					uni.hideLoading();
					if(result.data.code != 1){
						uni.showToast({
							title:result.data.msg,
							icon:'none'
						});
					}else{
						uni.showToast({
							title:"用户注册成功",
							duration: 1000,
							success: function () {
								setTimeout(function(){
									 uni.switchTab({
										url:'/pages/members/members'
									 });
								},1000) 
								}
						});
						this.clearAll();
						if(uni.getStorageSync("openid")!=''){
							uni.setStorageSync('openid', "");
							window.location.href = 'http://armindiary.mashizai.com/wechat/oauthAmi';
						}						
					}
					
				},
				});
		},
		getDate(type) {
		    const date = new Date();
		    let year = date.getFullYear();
		    let month = date.getMonth() + 1;
		    let day = date.getDate();
			
		    if (type === 'start') {
		        year = year - 60;
		    } else if (type === 'end') {
		        year = year + 2;
		    }
		    month = month > 9 ? month : '0' + month;;
		    day = day > 9 ? day : '0' + day;
		    return `${year}-${month}-${day}`;
		},
		 checkboxChange: function(e) {
		    console.log(e)
		    var checked = e.target.value
		    var changed = {}
		    for (var i = 0; i < this.checkboxItems.length; i++) {
		        if (checked.indexOf(this.checkboxItems[i].name) !== -1) {
		            changed['checkboxItems[' + i + '].checked'] = true
		        } else {
		            changed['checkboxItems[' + i + '].checked'] = false
		        }
		    }
		},
		radioChange: function(e) {
		    var checked = e.target.value
			this.muSex=checked;
		    /*var changed = {}
		    for (var i = 0; i < this.radioItems.length; i++) {
		        if (checked.indexOf(this.radioItems[i].name) !== -1) {
		            changed['radioItems[' + i + '].checked'] = true
		        } else {
		            changed['radioItems[' + i + '].checked'] = false
		        }
		    }*/
		},
		gotoarrow(){
			this.$router.go(-1)
		}
	},
	}
</script>

<style>
.birthday-date{
	float: right;
	line-height: 1.7rem;
}
.label-list{
	float: right;
	padding: 0 5px;
}
.radio-list{
	line-height: 0px;
}
uni-button:after{
	width: 0px;
	height:0px;
}
.content-spacing{
	margin-bottom: 0.5rem;
}
.input-box{
	text-align: -webkit-right;
}
.input-title,
.uni-title{
	float: left;
	text-align: center;
	line-height: 1.5rem;
}
.input-title .required{
	color:red;
}
.style-input{
	background-color: #ffffff;
	text-align: center;
	line-height: 3rem;
	font-size: 0.8rem;
	padding: 0.5rem;
	height: 1rem;
}
.portrait-img{
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	float: right;
	margin: 0.25rem;
}
.portrait-title{
	text-align: left;
	width: 96%;
	margin-left: 2%;
}
.portrait{
	background-color: #ffffff;
	text-align: center;
	line-height: 3rem;
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
}
.save-button{
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 12px;
    background: -webkit-gradient(linear,left top, right bottom,from(#fb4386),color-stop(#ec4fae),color-stop(#ce63d0),color-stop(#a377ea),to(#6488f9));
    background: -o-linear-gradient(left top,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
    background: linear-gradient(to right bottom,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
    color: #ffffff;
}

.head{
	margin-bottom: 0.8rem;
}
.uni-input-placeholder{
	font-size: 0.8rem;
}
.uni-radio-wrapper .uni-radio-input-checked{
	        background-color: #6d1c79 !important;
	        border-color: #6d1c79 !important;
}
.uni-textarea{
	clear: both;
	float: left;
	text-align: left;
	
}
	.add-members-box .submit-box uni-button {
		height:40px;
		line-height: 40px;
	}
	.add-members-box {
		    height: 60%;
		    border: 1px solid #ccc;
		    margin: 10px auto;
		    border-radius: 10px;
		    width: 96%;
	}
	.add-members-box img{
		width: 20px;
		height:20px;
		margin: 8px 10px 0px 0px;
	}
		
	.add-members-box .box-content {
		height: auto;
		overflow: scroll;
		max-height: 100%;
	}
	.add-members-box .submit-box {
		position: fixed;
	}
	.add-members-box .qty-box {
		padding: 0 8px;
	}
	.add-members-box .tc-box {
		margin-bottom: 40px;
		padding-right: 8px;
	}
	.add-members-box .qty-box .qty-title {
		float: left;
		line-height: 35px;
		height: 35px;
	}
	.add-members-box .qty-box uni-input {
		float: right;
		border: none;
	}
	.add-members-box .van-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 24px;
    position: relative;
    color: #000;
    font-size: 14px;
    overflow: hidden;
    padding: 0.5rem;
    background: #fff;
	}
	.add-members-box .van-cell:last-child{
		border-bottom: none;
	}
	.add-members-box .van-cell_title {
		max-width: 90px;
		height:35px;
		line-height: 35px;
	}
	.add-members-box .van-cell_title, 
	.add-members-box .van-cell_value {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    -moz-box-flex: 1;
	    flex: 1;
		font-size:0.8rem;
	}
	.add-members-box .van-cell_value {
		color: #969799;
		overflow: hidden;
		text-align: right;
		position: relative;
		vertical-align: middle;
	}
	.add-members-box .van-cell_select {
    overflow: hidden;
    text-align: right;
    position: relative;
    vertical-align: middle;
    height: 35px;
    color: #000;
    border-color: #6d1c79;
    background: #fff;
    border-radius: 10px;
	}
	.add-members-box uni-textarea {
		max-height: 50px;
		text-align: left;
		border: 1px solid #969799;
	}
	.add-members-box .van-field_body {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-moz-box-align: center;
		align-items: center;
		height: 100%;
		width: 60%;
		float: right;
	}
	.add-members-box .van-field_body .van-field_control{
		border: none;
	}
	.add-members-box .van-field_control {
		border: 0;
		margin: 0;
		padding: 0;
		width: 100%;
		resize: none;
		display: block;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background-color: transparent;
		text-align: left;
		height: 35px;
		line-height: 35px;
		border-radius: 0;
		font-size:14px;
	}
	.add-members-box .uni-textarea-placeholder{
		color:#ccc;
	}
	.add-members-box .van-cell-required:before {
		content: "*";
		position: absolute;
		left: 1px;
		font-size: 14px;
		color: #f44;
		top: 7px;
	}
	.add-members-box .uni-textarea-placeholder{
		color: #ccc;
	}
		
	.add-members-box .uni-input-input{
		color:red;
	}
	.add-members-box .notes{
		clear: both;
		padding: 5px 8px;
		border: 1px dashed #00c971;
		font-size: 14px;
	}
	.add-members-box .van-field_tc .van-field_control{
	
	}
	.add-members-box .van-field_tc  uni-button{
		border-bottom: none;
		border: 1px solid #ccc;
		text-align: center;
		border-radius: 5px;
		height: 34px;
		line-height: 34px;
		font-size: 14px;
		font-weight: normal;
		background: #fff;
		color: #000;
		padding: 0 8px;
		margin: 0;
	}
	.add-members-box .van-field_tc .tc_active {
		background: #00c971;
		color: #fff;
		border: 1px solid #00c971;
	}
	.c-submit{    
		background: rgb(109, 28, 121);
		color: #FFFFFF; 
		font-size: 14px;
	}
	.multiselect__option{
		    padding: 6px !important;
			min-height: 20px !important;
			font-size: 12px !important;
	}
</style>
